<template>
  <div>
    <button @click="sub(5)">-5</button>
    <span>{{ count }}</span>
    <button @click="add(5)">+5</button>

    <!-- <br>
    <button @click="sub">-</button>
    <span>{{ count }}</span>
    <button @click="add">+</button> -->
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.num;
    },
  },
  methods: {
    sub(i) {
      this.$store.dispatch("deAction", i)
    },
    // sub(i = 1) {
    //   // 触发 store 中 mutation 下的方法, 使用store.commit() 触发
    //   if(typeof i === "object") {
    //     this.$store.commit("decrement");
    //   }else if(typeof i === "number"){
    //     this.$store.commit('decrement',i);
    //   }
    // },
    add(i = 1) {
      if(typeof i === "object") {
        this.$store.commit("increment");
      }else if(typeof i === "number"){
        this.$store.commit('increment',i);
      }
    },
  }
}
</script>

<style>

</style>